<template>
  <view class="content">
    <view class="search-bar">
      <view class="search-bar__left">{{city}}</view>
      <view class="search-bar__center">
        <input
          class="center__input"
          placeholder="输入地点"
          placeholder-class="placeholder-style"
          v-model="searchValue"
          @focus="handleFocus"
          @input="handleInput"
        />
      </view>
      <view class="search-bar__right" @click="backToMap">取消</view>
    </view>
    <scroll-view
      v-if="showSearchList"
      class="search-list"
      scroll-y
      @scrolltolower="loadMore"
    >
      <view
        v-for="(item, index) in searchList"
        :key="index"
        class="search-list__item"
        @click="chooseAdress(item)"
      >
        <view class="search-list__item-icon">
          <image src="/static/images/point2.png"></image>
        </view>
        <view class="search-list__item-content">
          <view class="content-title">{{item.title}}</view>
          <view class="content-address">{{item.address}}</view>
        </view>
      </view>
    </scroll-view>
    <block v-else>
      <map
        id="myMap"
        class="map"
        :longitude="longitude"
        :latitude="latitude"
        :scale="18"
        :markers="covers"
        @markertap="handleTtap"
        :controls="controls"
        show-locationitem
        @regionchange="handleRegionChange"
      ></map>
      <cover-view class="cover-view__title">
        <cover-view class="cover-view__title-icon"></cover-view>
        <cover-view class="cover-view__title-text">{{formatted_addresses}}</cover-view>
      </cover-view>
      <cover-view class="cover-view__btn" @click="confirmPosition">站点巡检</cover-view>
    </block>
  </view>
</template>

<script>
import { mapActions,mapState } from 'vuex';
import QQMapWX from '@/common/qqmap-wx-jssdk1.2/qqmap-wx-jssdk'
let qqmapsdk
export default {
  data () {
    return {
      showSearchList: false,
      searchValue: '',
      city: '',
      la:'23',
      formatted_addresses: '',
      windowWidth: 0,
      windowHeight: 0,
      longitude: 0,
      latitude: 0,
      controls: [],
      searchList: [],
      page_index: 1,
      page_size: 10,
      isLoadMore: false,
      covers: [{
        id:1,
        latitude: 39.974577,
        longitude: 116.431424,
        iconPath: '/static/images/point2.png',
        width:30,
        height:30,
        label:{
          content:'站点',
          color:'#F76350',
          bgColor:'#fff',
          padding:5,
          borderRadius:4,
        },
          anchor:{ x: .5, y: 1 }
      }, {
        id:2,
        latitude: 39.959812,
        longitude: 116.461325,
        iconPath: '/static/images/point2.png',
        width:30,
        height:30,
        label:{
          content:'福彩销售站1',
          color:'#F76350',
          bgColor:'#fff',
          padding:5,
          borderRadius:4,
        },
          anchor:{ x: .5, y: 1 }
      },{
        id:3,
        latitude: 39.946275,
        longitude: 116.422394,
        iconPath: '/static/images/point2.png',
        width:30,
        height:30,
        label:{
          content:'福彩销售站2',
          color:'#F76350',
          bgColor:'#fff',
          padding:5,
          borderRadius:4,
        },
          anchor:{ x: .5, y: 1 }
      }]
    }
  },
  onLoad () {
    // 创建腾讯地图对象
    qqmapsdk = new QQMapWX({ key: 'NE4BZ-VY2L4-HNXUM-XJWP3-PKNNH-2RBP5' })
  },
  onReady () {
    this.getSystemInfo()
  },
  onShow () {	 
    this.initMap()
  },
  computed:{
	  ...mapState('map',['mapData'])	  
  },
  methods: {
	  ...mapActions('user', ['isLogin']),
	  ...mapActions('map', ['clearMap']),
  //获取地图状态
  getMapMode(){
	  if(this.mapData === undefined){
		  return
	  }else{
		  if(this.mapData.mode){
		  	  this.goToSite(this.mapData)
		  		  //清除地图数据
		  		this.clearMap()
		  }
	  }	  
  },


    // 初始化设备信息
    getSystemInfo () {
      uni.getSystemInfo({
        success: res => {
          this.windowWidth = res.windowWidth
          this.windowHeight = res.windowHeight
          this.controls.push({
            id: 0,
            iconPath: '/static/images/point.png',
            position: {
              width: 30,
              height: 30,
              left: this.windowWidth / 2 - 15,
              top: this.windowHeight / 2 - 60,
            }
          })
        }
      })
    },
    handleFocus () {
      this.showSearchList = true
    },
    handleInput (e) {
      let key = e.detail.value
      this.page_index = 1
      this.getSuggestion(key)
	  goToSite(key)
    },
    loadMore () {
      this.isLoadMore = true
      this.page_index++
      this.getSuggestion(this.searchValue)
    },
    backToMap () {
      this.showSearchList = false
      this.page_index = 1
      this.searchValue = ''
    },
    // 地图初始化
    initMap () {				
      this.getLocationInfo()	  
	  this.getMapMode()
    },

	//导航去站点
	goToSite(info){
		let plugin = requirePlugin('routePlan');
		let keyword = 'NE4BZ-VY2L4-HNXUM-XJWP3-PKNNH-2RBP5';  //使用在腾讯位置服务申请的key
		let referer = 'sitePatrol';   //调用插件的app的名称
		let endPoint = JSON.stringify({  //终点
		  'name': info.name,
		  'latitude': info.latitude,
		  'longitude': info.longitude
		});
		wx.navigateTo({
		  url: 'plugin://routePlan/index?key=' + keyword + '&referer=' + referer + '&endPoint=' + endPoint
		});
	},
	
    // 根据关键字搜索地图数据
    getSuggestion (key) {		
      qqmapsdk.getSuggestion({
        keyword: key,
        region: '北京市',
        region_fix: 1,
        policy: 1,
        page_index: this.page_index,
        page_size: this.page_size,
        success: res => {			 
          if (this.isLoadMore) {
            this.searchList = this.searchList.concat(res.data)
			 wx.navigateTo({  
			          url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint  
			        });
					
          } else {
            this.searchList = res.data
          }
          this.isLoadMore = false
        }
      })
    },
    // 获取当前位置信息
    getLocationInfo () {		
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          // 设置中心点位置
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.reverseGeocoder({
            longitude: res.longitude,
            latitude: res.latitude
          })
        }
      })
    },
    handleRegionChange (e) {
      if (e.type === 'end' && e.causedBy === 'drag') {
        this.getCenterPositon()
      }
    },
    // 获取当前地图中心位置
    getCenterPositon () {
      const mapCtx = uni.createMapContext('myMap', this)
      mapCtx.getCenterLocation({
        success: res => {
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.reverseGeocoder({
            longitude: res.longitude,
            latitude: res.latitude
          })
        }
      })
    },
    // 根据坐标解析位置信息
    reverseGeocoder (location) {
      qqmapsdk.reverseGeocoder({
        location: {
          longitude: location.longitude,
          latitude: location.latitude
        },
        get_poi: '1',
        success: res => {
          this.city = res.result.ad_info.city
          this.formatted_addresses = res.result.formatted_addresses.recommend
          this.searchList = res.result.pois
        }
      })
    },
    chooseAdress (item) {
      this.formatted_addresses = item.title
      this.longitude = item.location.lng
      this.latitude = item.location.lat
      this.backToMap()
    },
   async confirmPosition () {
		const isLogin = await this.isLogin();
		if(!isLogin){
			//用户未登录
			return
		}
      const map = [
        `latitude=${this.latitude}`,
        `longitude=${this.longitude}`
      ]
      uni.navigateTo({ url: '/subpkg/pages/add-shop/add-shop?' + map.join('&') })
    },
    //点击标记点事件
   async  handleTtap(item){
		const isLogin = await this.isLogin();
		if(!isLogin){
			//用户未登录
			return
		}
      // console.log('id'+ '='+item.markerId);
      uni.navigateTo({ url: '/subpkg/pages/shop/shop?id=' + item.markerId })
    }
  }
}
</script>

<style lang="scss" scoped>
	
	.content {
	  width: 100%;
	  height: 100%;
	}
	.search-bar {
	  height: 100upx;
	  background-color: #fff;
	  box-shadow: 0 2px 12px 0 rgba(0, 0 ,0, .1);
	  display: flex;
	  .search-bar__left {
	    flex: 0.2;
	    position: relative;
	    font-size: 28upx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    &:after {
	      content: '';
	      position: absolute;
	      width: 2upx;
	      height: 30upx;
	      background-color: #C0C0C0;
	      right: 0;
	      top: 35upx;
	      bottom: 35upx;
	    }
	  }
	  .search-bar__center {
	    flex: 0.6;
	    position: relative;
	    display: flex;
	    align-items: center;
	    .placeholder-style {
	      font-size: 28upx;
	    }
	    .center__input {
	      flex: 1;
	      margin: 0 30upx;
	      font-size: 28upx;
	    }
	    &:after {
	      content: '';
	      position: absolute;
	      width: 2upx;
	      height: 30upx;
	      background-color: #C0C0C0;
	      right: 0;
	      top: 35upx;
	      bottom: 35upx;
	    }
	  }
	  .search-bar__right {
	    flex: 0.2;
	    font-size: 28upx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	  }
	}
	.search-list {
	  width: 100%;
	  height: calc(100% - 101upx);
	  background-color: #fff;
	  border-top: 1upx #f0f0f0 solid;
	  .search-list__item {
	    height: 120upx;
	    display: flex;
	    border-bottom: 1upx #f0f0f0 solid;
	    .search-list__item-icon {
	      width: 10%;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      image {
	        width: 30upx;
	        height: 30upx;
	      }
	    }
	    .search-list__item-content {
	      padding: 10upx 0;
	      width: calc(90% - 20upx);
	      line-height: 50upx;
	      padding-right: 20upx;
	      .content-title {
	        width: 100%;
	        overflow: hidden;
	        text-overflow:ellipsis;
	        white-space: nowrap;
	        font-size: 28upx;
	      }
	      .content-address {
	        width: 100%;
	        overflow: hidden;
	        text-overflow:ellipsis;
	        white-space: nowrap;
	        color: #939393;
	        font-size: 28upx;
	      }
	    }
	  }
	}
	.map {
	  width: 100%;
	  height: calc(100% - 100upx);
	}
	.cover-view__title {
	  position: absolute;
	  bottom: 140upx;
	  width: 90%;
	  margin: 0 5%;
	  background-color: #fff;
	  height: 160upx;
	  box-shadow: 0 2px 12px 0 rgba(0, 0 ,0, .1);
	  border-radius: 4px;
	  font-weight: bold;
	  text-align: center;
	  line-height: 160upx;
	  display: flex;
	  align-items: center;
	  .cover-view__title-icon {
	    margin: 0 30upx;
	    width: 20upx;
	    height: 20upx;
	    border-radius: 10upx;
	    background-color: #3cac94;
	  }
	  .cover-view__title-text {
	    flex: 1;
	    margin-right: 30upx;
	    font-size: 40upx;
	    font-weight: bold;
	    text-align: left;
	    overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	  }
	}
	.cover-view__btn {
	  position: absolute;
	  bottom: 20upx;
	  width: 90%;
	  margin: 0 5%;
	  height: 100upx;
	  color: #fff;
	  box-shadow: 0 2px 12px 0 rgba(0, 0 ,0, .1);
	  border-radius: 4px;
	  background-color: #072945;
	  font-weight: bold;
	  text-align: center;
	  line-height: 100upx;
	}

</style>
